<!-- 事件修饰符
@事件名.stop -> 阻止冒泡
@事件名.prevent -> 阻止默认行为  -->
<div id="app">
    <h3>@事件名.stop -> 阻止冒泡</h3>
    <div @click="fatherFn" class="father" style="width: 100px; height: 100px;background-color: aqua;">
        <div @click.stop="sonFn" class="son" style="width: 50px;height: 50px;background-color: #000;">儿子</div>
    </div>

    <h3>@事件名.prevent -> 阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        methods: {
            fatherFn() {
                alert('父亲被点击了')
            },
            sonFn() {
                alert('儿子被点击了')
            }
        },
    })
</script>